<!--  商品列表-->
<template>
  <div class="productlist">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/main' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item
        ><a href="javascript:;">产品管理</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>产品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="cid"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="cid" label="商品序号"> </el-table-column>
        <el-table-column prop="title" label="商品标题"> </el-table-column>
        <el-table-column label="商品图片" prop="imgsrc">
          <template slot-scope="scope">
            <el-avatar
              shape="square"
              size="large"
              :src="'http://localhost:4000/' + scope.row.imgsrc"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="是否可用" prop="is_show">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_show"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              active-text="可用"
              inactive-text="禁用"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header"> 操作 </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <!-- @click="dialogVisible = true" -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 删除模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>你确定要删除此商品吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deletePro">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dialogVisible: false,
      tableData: [
        {
          cid: 1,
          title: "大家电",
          is_show: "1",
          imgsrc: "public/upload/my_iu.jpg",
          children: [
            {
              cid: 11,
              title: "冰箱",
              imgsrc: "public/upload/my_iu.jpg",
              is_show: "1",
            },
            {
              cid: 12,
              title: "空调",
              imgsrc: "public/upload/my_iu.jpg",
              is_show: "1",
            },
          ],
        },
        {
          cid: 2,
          title: "厨房电器",
          is_show: "1",
          imgsrc: "public/upload/my_iu.jpg",
          children: [
            {
              cid: 21,
              title: "电饭煲",
              imgsrc: "public/upload/my_iu.jpg",
              is_show: "0",
            },
            {
              cid: 22,
              title: "电饼铛",
              imgsrc: "public/upload/my_iu.jpg",
              is_show: "1",
            },
          ],
        },
      ],
      productDel: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(tab) {
      console.log(tab);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      //   console.log(index, row);
      this.dialogVisible = true;
      this.productDel = row;
    },
    deletePro() {
      console.log(this.productDel);
      this.dialogVisible = false;
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.productlist {
  .el-card {
    margin-top: 15px;
  }
}
</style>